<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>

  <div id="app">

    <el-upload ref="upload" action :auto-upload="false" list-type="picture-card" :on-preview="handlePictureCardPreview"
      :multiple="true" :on-change="getFile" :http-request="Upload" :on-success="handleSuccess" :on-remove="handleRemove"
      accept="image/png,image/gif,image/jpeg">
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button @click="sureUpload">确定上传</el-button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>

    const app = new Vue({
      el: '#app',
      data() {
        return {
          dialogImageUrl: '',
          dialogVisible: false,
          fileList: [],
          avatarUrl: {}
        };
      },
      methods: {
        // 图片 转为base64
        async sureUpload() {
          // vue react 通过dom元素的submit事件，触发表单提交
          this.$refs.upload.submit()
          console.log("sureUpload:")
          let imageBase64 = await this.getBase64(this.avatarUrl)
          console.log('imageBase64:', imageBase64.split(',')[1])
          const data = await axios.post('/api/home/upload', imageBase64.split(',')[1])
          console.log("data:", data)
        },
        getBase64(file) {
          return new Promise(function (resolve, reject) {
            let reader = new FileReader(); // 上传文件域
            let imgResult = "";
            reader.readAsDataURL(file);
            reader.onload = function () {
              imgResult = reader.result;
            };
            reader.onerror = function (error) {
              reject(error);
            };
            reader.onloadend = function () {
              resolve(imgResult);
            };
          });
        },
        getFile(file) {
          console.log("file:", file.raw)
          this.avatarUrl = file.raw
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        // 文件上传成功时的钩子
        handleSuccess(response, file, fileList) {
          console.log("fileList:", fileList)
          this.fileList = fileList;
        },
        Upload(res) {
          console.log('Upload:', res)
        },
        beforeVideoUpload(file) {
          const isLt100M = file.size / 1024 / 1024 > 0 && file.size / 1024 / 1024 < 1024;
          const isLt30 = file.name.length < 30;
          console.log(this.fileList, 'fileList')
          if (this.fileList.length > 1) {
            this.$message.error('一次只能上传一个问题件');
          }

          if (['video/mp4', 'audio/mpeg'].indexOf(file.type) == -1) {
            this.$message.error('请上传正确的文件格式');
            return false;
          }

          if (!isLt100M) {
            this.$message.error('上传文件大小要在0MB~1GB之间哦!');
            return false;
          }
          if (!isLt30) {
            this.$message.error('上传文件名称长度必须要小于30个文字哦!');
            return false;
          }
        }
      }
    })



  </script>
</body>

</html> -->

<form action="/api/upload" enctype="multipart/form-data" method="POST">
  <input type="file" name="file" accept="image/*">
  <button type="submit">上传</button>
</form>
